<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/index'
import { userChangeInfoService } from '@/api/user.js'

const formRef = ref()
const {
  user: { email, id, nickname, username },
  getUser
} = useUserStore()

const userForm = ref({
  id,
  email,
  nickname,
  username
})

const rules = {
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 1, max: 10, message: '昵称是6-10位的字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {
      pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
      message: '请输入正确邮箱',
      trigger: 'blur'
    }
  ]
}

const onChange = async () => {
  await formRef.value.validate()
  await userChangeInfoService(userForm.value)
  getUser()
  ElMessage.success('修改成功！')
}
</script>
<template>
  <PageContainer title="基本资料">
    <el-form :model="userForm" ref="formRef" :rules="rules">
      <el-form-item label="登录名称" label-width="80px" style="width: 300px">
        <el-input disabled v-model="userForm.username"></el-input>
      </el-form-item>
      <el-form-item
        prop="nickname"
        label="用户昵称"
        label-width="80px"
        style="width: 300px"
      >
        <el-input v-model="userForm.nickname"></el-input>
      </el-form-item>
      <el-form-item
        prop="email"
        label="用户邮箱"
        label-width="80px"
        style="width: 300px"
      >
        <el-input v-model="userForm.email"></el-input>
      </el-form-item>
      <el-form-item label-width="80px">
        <el-button @click="onChange" type="primary">提交修改</el-button>
      </el-form-item>
    </el-form>
  </PageContainer>
</template>
